<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DeepSeek - 智能交互平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- Tailwind配置 -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#3B82F6", // 蓝色作为主色调，代表科技感和信任感
              secondary: "#10B981", // 绿色作为辅助色，用于强调和交互元素
              accent: "#8B5CF6", // 紫色作为强调色，用于特殊元素
              dark: {
                100: "#374151",
                200: "#1F2937",
                300: "#111827",
                400: "#030712",
              },
              light: {
                100: "#FFFFFF",
                200: "#F3F4F6",
                300: "#E5E7EB",
                400: "#D1D5DB",
              },
            },
            fontFamily: {
              sans: ["Inter", "system-ui", "sans-serif"],
              mono: ["JetBrains Mono", "monospace"],
            },
            animation: {
              "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
              float: "float 3s ease-in-out infinite",
              "fade-in": "fadeIn 0.5s ease-in-out",
            },
            keyframes: {
              float: {
                "0%, 100%": { transform: "translateY(0)" },
                "50%": { transform: "translateY(-10px)" },
              },
              fadeIn: {
                "0%": { opacity: "0" },
                "100%": { opacity: "1" },
              },
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-shadow {
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .bg-gradient-primary {
          background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        }
        .transition-theme {
          transition: background-color 0.3s ease, color 0.3s ease,
            border-color 0.3s ease;
        }
      }
    </style>

    <style>
      /* 基础样式 */
      body {
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      /* 滚动条样式 */
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      ::-webkit-scrollbar-track {
        background: transparent;
      }

      ::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 4px;
      }

      .dark ::-webkit-scrollbar-thumb {
        background-color: rgba(75, 85, 99, 0.5);
      }

      /* 平滑滚动 */
      html {
        scroll-behavior: smooth;
      }
    </style>
  </head>

  <body
    class="bg-light-200 text-gray-800 dark:bg-dark-300 dark:text-gray-100 transition-theme"
  >
    <!-- 导航栏 -->
    <header
      class="fixed top-0 left-0 right-0 z-50 bg-light-100/80 dark:bg-dark-300/80 backdrop-blur-md shadow-sm transition-all duration-300"
    >
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <!-- Logo -->
          <div class="flex items-center">
            <a href="#" class="flex items-center space-x-2">
              <div
                class="w-8 h-8 bg-gradient-primary rounded-lg flex items-center justify-center"
              >
                <span class="text-white font-bold text-lg">D</span>
              </div>
              <span
                class="text-xl font-bold bg-clip-text text-transparent bg-gradient-primary"
                >DeepSeek</span
              >
            </a>
          </div>

          <!-- 桌面导航 -->
          <nav class="hidden md:flex items-center space-x-8">
            <a
              href="#features"
              class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
              >功能</a
            >
            <a
              href="#demo"
              class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
              >演示</a
            >
            <a
              href="#pricing"
              class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
              >价格</a
            >
            <a
              href="#faq"
              class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
              >常见问题</a
            >
          </nav>

          <!-- 右侧按钮和主题切换 -->
          <div class="flex items-center space-x-4">
            <!-- 主题切换按钮 -->
            <button
              id="theme-toggle"
              class="p-2 rounded-full hover:bg-light-300 dark:hover:bg-dark-100 transition-colors"
            >
              <i class="fa fa-sun-o text-yellow-500 block dark:hidden"></i>
              <i class="fa fa-moon-o text-blue-300 hidden dark:block"></i>
            </button>

            <!-- 登录按钮 -->
            <a
              href="#"
              class="hidden sm:inline-flex px-4 py-2 text-sm font-medium text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
              >登录</a
            >

            <!-- 注册按钮 -->
            <a
              href="#"
              class="hidden sm:inline-flex px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors shadow-sm hover:shadow"
              >注册</a
            >

            <!-- 移动端菜单按钮 -->
            <button
              id="mobile-menu-button"
              class="md:hidden p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-light-300 dark:hover:bg-dark-100 transition-colors"
            >
              <i class="fa fa-bars"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 移动端导航菜单 -->
      <div
        id="mobile-menu"
        class="hidden md:hidden bg-light-100 dark:bg-dark-200 border-t border-light-300 dark:border-dark-100 animate-fade-in"
      >
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
          <a
            href="#features"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-light-300 hover:text-primary dark:text-gray-300 dark:hover:bg-dark-100 transition-colors"
            >功能</a
          >
          <a
            href="#demo"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-light-300 hover:text-primary dark:text-gray-300 dark:hover:bg-dark-100 transition-colors"
            >演示</a
          >
          <a
            href="#pricing"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-light-300 hover:text-primary dark:text-gray-300 dark:hover:bg-dark-100 transition-colors"
            >价格</a
          >
          <a
            href="#faq"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-light-300 hover:text-primary dark:text-gray-300 dark:hover:bg-dark-100 transition-colors"
            >常见问题</a
          >
          <div class="flex space-x-3 px-3 py-2">
            <a
              href="#"
              class="flex-1 text-center px-4 py-2 text-sm font-medium text-gray-600 border border-light-300 dark:border-dark-100 rounded-lg hover:bg-light-300 dark:hover:bg-dark-100 transition-colors"
              >登录</a
            >
            <a
              href="#"
              class="flex-1 text-center px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors"
              >注册</a
            >
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容 -->
    <main>
      <!-- 英雄区域 -->
      <section class="pt-32 pb-20 md:pt-40 md:pb-28">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex flex-col lg:flex-row items-center gap-12">
            <!-- 左侧文本 -->
            <div class="lg:w-1/2 space-y-6 text-center lg:text-left">
              <h1
                class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-shadow"
              >
                探索智能的<br />
                <span class="bg-clip-text text-transparent bg-gradient-primary"
                  >未来交互方式</span
                >
              </h1>
              <p
                class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-xl mx-auto lg:mx-0"
              >
                DeepSeek
                提供强大的AI驱动交互体验，让人与机器的沟通变得更加自然、高效。
              </p>
              <div
                class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-4"
              >
                <a
                  href="#demo"
                  class="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-0.5"
                >
                  立即体验
                </a>
                <a
                  href="#features"
                  class="px-8 py-3 bg-light-300 hover:bg-light-400 dark:bg-dark-100 dark:hover:bg-dark-200 text-gray-700 dark:text-gray-200 font-medium rounded-lg transition-all transform hover:-translate-y-0.5"
                >
                  了解更多
                </a>
              </div>
              <div
                class="flex items-center justify-center lg:justify-start gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2"
              >
                <i class="fa fa-check-circle text-secondary"></i>
                <span>无需信用卡 · 免费开始 · 随时升级</span>
              </div>
            </div>

            <!-- 右侧图像 -->
            <div class="lg:w-1/2 relative">
              <div
                class="relative z-10 bg-white dark:bg-dark-200 rounded-2xl shadow-2xl p-6 animate-float"
              >
                <div class="flex items-center gap-3 mb-4">
                  <div
                    class="w-10 h-10 rounded-full bg-gradient-primary flex items-center justify-center text-white font-bold"
                  >
                    D
                  </div>
                  <div>
                    <h3 class="font-semibold">DeepSeek 助手</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                      正在运行中
                    </p>
                  </div>
                </div>
                <div class="space-y-4">
                  <!-- 对话气泡 -->
                  <div class="flex gap-3">
                    <div
                      class="w-8 h-8 rounded-full bg-gradient-primary flex-shrink-0"
                    ></div>
                    <div
                      class="bg-light-200 dark:bg-dark-100 rounded-2xl rounded-tl-none px-4 py-2 max-w-[80%]"
                    >
                      <p class="text-sm">
                        你好！我是DeepSeek助手，有什么可以帮助你的吗？
                      </p>
                    </div>
                  </div>
                  <div class="flex gap-3 justify-end">
                    <div
                      class="bg-primary text-white rounded-2xl rounded-tr-none px-4 py-2 max-w-[80%]"
                    >
                      <p class="text-sm">你能介绍一下你们的主要功能吗？</p>
                    </div>
                    <div
                      class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex-shrink-0"
                    ></div>
                  </div>
                  <div class="flex gap-3">
                    <div
                      class="w-8 h-8 rounded-full bg-gradient-primary flex-shrink-0"
                    ></div>
                    <div
                      class="bg-light-200 dark:bg-dark-100 rounded-2xl rounded-tl-none px-4 py-2 max-w-[80%]"
                    >
                      <p class="text-sm">
                        我们提供智能对话、内容生成、数据分析等多种功能，支持多语言交互，并且可以根据你的需求进行定制化服务。
                      </p>
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <div class="relative mt-6">
                    <input
                      type="text"
                      placeholder="输入你的问题..."
                      class="w-full bg-light-200 dark:bg-dark-100 rounded-full px-4 py-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary/50 text-sm"
                    />
                    <button
                      class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white"
                    >
                      <i class="fa fa-paper-plane-o"></i>
                    </button>
                  </div>
                </div>
              </div>

              <!-- 背景装饰 -->
              <div
                class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full bg-gradient-primary/20 rounded-full blur-3xl -z-10"
              ></div>
              <div
                class="absolute -bottom-6 -right-6 w-24 h-24 bg-accent/20 rounded-full blur-xl -z-10"
              ></div>
              <div
                class="absolute -top-6 -left-6 w-32 h-32 bg-primary/20 rounded-full blur-xl -z-10"
              ></div>
            </div>
          </div>

          <!-- 信任标志 -->
          <div class="mt-20 text-center">
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
              受到全球领先企业的信任
            </p>
            <div
              class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70"
            >
              <div class="text-gray-400 dark:text-gray-500 text-xl font-bold">
                Company A
              </div>
              <div class="text-gray-400 dark:text-gray-500 text-xl font-bold">
                Company B
              </div>
              <div class="text-gray-400 dark:text-gray-500 text-xl font-bold">
                Company C
              </div>
              <div class="text-gray-400 dark:text-gray-500 text-xl font-bold">
                Company D
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 功能区域 -->
      <section
        id="features"
        class="py-20 bg-white dark:bg-dark-200 transition-theme"
      >
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">
              强大功能，智能体验
            </h2>
            <p class="text-lg text-gray-600 dark:text-gray-300">
              DeepSeek 提供全方位的智能交互能力，满足你的各种需求
            </p>
          </div>

          <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 功能卡片 1 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-xl p-6 shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1 duration-300"
            >
              <div
                class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4"
              >
                <i class="fa fa-comments text-primary text-xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">智能对话</h3>
              <p class="text-gray-600 dark:text-gray-300">
                自然流畅的对话体验，理解上下文语境，提供精准回应。
              </p>
            </div>

            <!-- 功能卡片 2 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-xl p-6 shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1 duration-300"
            >
              <div
                class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4"
              >
                <i class="fa fa-file-text-o text-secondary text-xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">内容生成</h3>
              <p class="text-gray-600 dark:text-gray-300">
                快速生成高质量文本内容，包括文章、邮件、代码等多种形式。
              </p>
            </div>

            <!-- 功能卡片 3 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-xl p-6 shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1 duration-300"
            >
              <div
                class="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4"
              >
                <i class="fa fa-language text-accent text-xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">多语言支持</h3>
              <p class="text-gray-600 dark:text-gray-300">
                支持超过20种语言的交互和翻译，打破语言障碍。
              </p>
            </div>

            <!-- 功能卡片 4 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-xl p-6 shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1 duration-300"
            >
              <div
                class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4"
              >
                <i class="fa fa-bar-chart text-primary text-xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">数据分析</h3>
              <p class="text-gray-600 dark:text-gray-300">
                智能分析数据，提取关键信息，生成直观易懂的报告。
              </p>
            </div>

            <!-- 功能卡片 5 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-xl p-6 shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1 duration-300"
            >
              <div
                class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4"
              >
                <i class="fa fa-cogs text-secondary text-xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">定制化服务</h3>
              <p class="text-gray-600 dark:text-gray-300">
                根据业务需求进行定制化开发，提供专属解决方案。
              </p>
            </div>

            <!-- 功能卡片 6 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-xl p-6 shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1 duration-300"
            >
              <div
                class="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4"
              >
                <i class="fa fa-shield text-accent text-xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">安全可靠</h3>
              <p class="text-gray-600 dark:text-gray-300">
                严格的数据加密和隐私保护，确保信息安全。
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- 演示区域 -->
      <section
        id="demo"
        class="py-20 bg-light-200 dark:bg-dark-300 transition-theme"
      >
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">
              亲身体验智能交互
            </h2>
            <p class="text-lg text-gray-600 dark:text-gray-300">
              尝试与DeepSeek进行对话，感受AI带来的便捷与高效
            </p>
          </div>

          <div
            class="max-w-3xl mx-auto bg-white dark:bg-dark-200 rounded-2xl shadow-xl overflow-hidden"
          >
            <!-- 演示界面头部 -->
            <div class="bg-gradient-primary px-6 py-4">
              <h3 class="text-white font-semibold">DeepSeek 演示</h3>
              <p class="text-white/80 text-sm">与AI助手进行对话</p>
            </div>

            <!-- 对话区域 -->
            <div id="chat-container" class="h-96 overflow-y-auto p-6 space-y-4">
              <!-- 系统消息 -->
              <div class="flex gap-3">
                <div
                  class="w-8 h-8 rounded-full bg-gradient-primary flex-shrink-0"
                ></div>
                <div
                  class="bg-light-200 dark:bg-dark-100 rounded-2xl rounded-tl-none px-4 py-2 max-w-[80%]"
                >
                  <p class="text-sm">
                    你好！我是DeepSeek AI助手，有什么可以帮助你的吗？
                  </p>
                </div>
              </div>

              <!-- 预设用户消息 -->
              <div class="flex gap-3 justify-end">
                <div
                  class="bg-primary text-white rounded-2xl rounded-tr-none px-4 py-2 max-w-[80%]"
                >
                  <p class="text-sm">请介绍一下DeepSeek的主要特点</p>
                </div>
                <div
                  class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex-shrink-0"
                ></div>
              </div>

              <!-- 预设AI回复 -->
              <div class="flex gap-3">
                <div
                  class="w-8 h-8 rounded-full bg-gradient-primary flex-shrink-0"
                ></div>
                <div
                  class="bg-light-200 dark:bg-dark-100 rounded-2xl rounded-tl-none px-4 py-2 max-w-[80%]"
                >
                  <p class="text-sm">
                    DeepSeek是一个强大的AI交互平台，主要特点包括：
                  </p>
                  <ul class="text-sm mt-2 space-y-1 list-disc list-inside">
                    <li>自然语言理解能力强，支持复杂对话</li>
                    <li>多领域知识覆盖，提供专业回答</li>
                    <li>支持多种任务类型，如写作、翻译、编程等</li>
                    <li>保护用户隐私，数据安全可靠</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 输入区域 -->
            <div class="p-6 border-t border-light-300 dark:border-dark-100">
              <div class="flex gap-3">
                <input
                  type="text"
                  id="user-input"
                  placeholder="输入你的问题..."
                  class="flex-1 bg-light-200 dark:bg-dark-100 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/50"
                />
                <button
                  id="send-button"
                  class="px-4 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors"
                >
                  <i class="fa fa-paper-plane-o"></i>
                </button>
              </div>
              <div class="mt-3 flex flex-wrap gap-2">
                <button
                  class="text-xs px-3 py-1 bg-light-200 dark:bg-dark-100 rounded-full hover:bg-light-300 dark:hover:bg-dark-200 transition-colors"
                  data-query="如何使用DeepSeek的API？"
                >
                  如何使用API？
                </button>
                <button
                  class="text-xs px-3 py-1 bg-light-200 dark:bg-dark-100 rounded-full hover:bg-light-300 dark:hover:bg-dark-200 transition-colors"
                  data-query="DeepSeek支持哪些编程语言？"
                >
                  支持哪些编程语言？
                </button>
                <button
                  class="text-xs px-3 py-1 bg-light-200 dark:bg-dark-100 rounded-full hover:bg-light-300 dark:hover:bg-dark-200 transition-colors"
                  data-query="有免费计划吗？"
                >
                  有免费计划吗？
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 价格区域 -->
      <section
        id="pricing"
        class="py-20 bg-white dark:bg-dark-200 transition-theme"
      >
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">灵活的价格方案</h2>
            <p class="text-lg text-gray-600 dark:text-gray-300">
              选择最适合你需求的方案，随时可以升级或降级
            </p>

            <!-- 计费方式切换 -->
            <div class="flex items-center justify-center mt-8 space-x-4">
              <span class="text-gray-600 dark:text-gray-300">按月付费</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  id="billing-toggle"
                  class="sr-only peer"
                />
                <div
                  class="w-11 h-6 bg-light-300 dark:bg-dark-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"
                ></div>
              </label>
              <span class="text-gray-600 dark:text-gray-300"
                >按年付费
                <span
                  class="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-0.5 rounded"
                  >省20%</span
                ></span
              >
            </div>
          </div>

          <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <!-- 免费方案 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-2xl p-8 shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1 duration-300 border border-transparent hover:border-primary/20"
            >
              <h3 class="text-xl font-semibold mb-2">免费版</h3>
              <p class="text-gray-600 dark:text-gray-300 text-sm mb-6">
                适合个人学习和体验
              </p>
              <div class="mb-6">
                <span class="text-4xl font-bold">¥0</span>
                <span class="text-gray-500 dark:text-gray-400">/月</span>
              </div>
              <a
                href="#"
                class="block w-full text-center py-3 border-2 border-primary text-primary font-medium rounded-lg hover:bg-primary/5 transition-colors mb-8"
              >
                免费开始
              </a>
              <ul class="space-y-3">
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">每月50次对话</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">基础功能访问</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">社区支持</span>
                </li>
                <li
                  class="flex items-start gap-2 text-gray-400 dark:text-gray-500"
                >
                  <i class="fa fa-times mt-1"></i>
                  <span class="text-sm">高级功能</span>
                </li>
                <li
                  class="flex items-start gap-2 text-gray-400 dark:text-gray-500"
                >
                  <i class="fa fa-times mt-1"></i>
                  <span class="text-sm">API访问</span>
                </li>
              </ul>
            </div>

            <!-- 专业方案 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2 duration-300 border-2 border-primary relative z-10"
            >
              <div
                class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-primary text-white text-xs font-semibold px-3 py-1 rounded-full"
              >
                最受欢迎
              </div>
              <h3 class="text-xl font-semibold mb-2">专业版</h3>
              <p class="text-gray-600 dark:text-gray-300 text-sm mb-6">
                适合个人开发者和小型团队
              </p>
              <div class="mb-6">
                <span class="text-4xl font-bold">¥99</span>
                <span class="text-gray-500 dark:text-gray-400">/月</span>
              </div>
              <a
                href="#"
                class="block w-full text-center py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors shadow-sm mb-8"
              >
                选择方案
              </a>
              <ul class="space-y-3">
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">每月1000次对话</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">所有基础功能</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">优先社区支持</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">全部高级功能</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">基础API访问</span>
                </li>
              </ul>
            </div>

            <!-- 企业方案 -->
            <div
              class="bg-light-200 dark:bg-dark-300 rounded-2xl p-8 shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1 duration-300 border border-transparent hover:border-primary/20"
            >
              <h3 class="text-xl font-semibold mb-2">企业版</h3>
              <p class="text-gray-600 dark:text-gray-300 text-sm mb-6">
                适合大型企业和团队
              </p>
              <div class="mb-6">
                <span class="text-4xl font-bold">¥499</span>
                <span class="text-gray-500 dark:text-gray-400">/月</span>
              </div>
              <a
                href="#"
                class="block w-full text-center py-3 border-2 border-primary text-primary font-medium rounded-lg hover:bg-primary/5 transition-colors mb-8"
              >
                联系销售
              </a>
              <ul class="space-y-3">
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">无限次对话</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">专属部署选项</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">24/7专属支持</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">高级安全功能</span>
                </li>
                <li class="flex items-start gap-2">
                  <i class="fa fa-check text-secondary mt-1"></i>
                  <span class="text-sm">高级API访问</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- 常见问题 -->
      <section
        id="faq"
        class="py-20 bg-light-200 dark:bg-dark-300 transition-theme"
      >
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">常见问题</h2>
            <p class="text-lg text-gray-600 dark:text-gray-300">
              解答你可能有的疑问
            </p>
          </div>

          <div class="max-w-3xl mx-auto space-y-4">
            <!-- FAQ 项目 -->
            <div
              class="bg-white dark:bg-dark-200 rounded-xl overflow-hidden shadow-sm"
            >
              <button
                class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"
              >
                <span class="font-medium text-lg"
                  >DeepSeek 如何保护我的数据隐私？</span
                >
                <i
                  class="fa fa-chevron-down text-gray-400 transition-transform duration-300"
                ></i>
              </button>
              <div class="faq-content hidden px-6 pb-6">
                <p class="text-gray-600 dark:text-gray-300">
                  DeepSeek
                  非常重视用户数据隐私。我们采用端到端加密保护你的数据传输，所有用户数据仅用于提供服务，不会与第三方共享。你可以随时删除你的对话历史，企业版用户还可以选择本地部署以获得更高的数据控制权。
                </p>
              </div>
            </div>

            <div
              class="bg-white dark:bg-dark-200 rounded-xl overflow-hidden shadow-sm"
            >
              <button
                class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"
              >
                <span class="font-medium text-lg"
                  >我可以将 DeepSeek 与其他应用集成吗？</span
                >
                <i
                  class="fa fa-chevron-down text-gray-400 transition-transform duration-300"
                ></i>
              </button>
              <div class="faq-content hidden px-6 pb-6">
                <p class="text-gray-600 dark:text-gray-300">
                  是的，专业版和企业版用户可以使用我们的API将DeepSeek与各种应用程序集成。我们提供详细的API文档和SDK，支持多种编程语言，帮助你轻松实现集成。
                </p>
              </div>
            </div>

            <div
              class="bg-white dark:bg-dark-200 rounded-xl overflow-hidden shadow-sm"
            >
              <button
                class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"
              >
                <span class="font-medium text-lg"
                  >免费版和付费版有什么区别？</span
                >
                <i
                  class="fa fa-chevron-down text-gray-400 transition-transform duration-300"
                ></i>
              </button>
              <div class="faq-content hidden px-6 pb-6">
                <p class="text-gray-600 dark:text-gray-300">
                  免费版提供基础功能和有限的使用次数，适合个人学习和体验。付费版提供更多的使用次数、全部高级功能、优先支持和API访问权限。企业版还提供专属部署、高级安全功能和定制化服务。
                </p>
              </div>
            </div>

            <div
              class="bg-white dark:bg-dark-200 rounded-xl overflow-hidden shadow-sm"
            >
              <button
                class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"
              >
                <span class="font-medium text-lg">DeepSeek 支持哪些语言？</span>
                <i
                  class="fa fa-chevron-down text-gray-400 transition-transform duration-300"
                ></i>
              </button>
              <div class="faq-content hidden px-6 pb-6">
                <p class="text-gray-600 dark:text-gray-300">
                  DeepSeek
                  支持超过20种语言，包括中文、英文、日文、韩文、西班牙文、法文、德文等主要语言。我们持续扩展语言支持范围，以满足全球用户的需求。
                </p>
              </div>
            </div>

            <div
              class="bg-white dark:bg-dark-200 rounded-xl overflow-hidden shadow-sm"
            >
              <button
                class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"
              >
                <span class="font-medium text-lg">如何升级我的账户？</span>
                <i
                  class="fa fa-chevron-down text-gray-400 transition-transform duration-300"
                ></i>
              </button>
              <div class="faq-content hidden px-6 pb-6">
                <p class="text-gray-600 dark:text-gray-300">
                  你可以在账户设置中的"订阅"页面升级你的账户。升级后，新的计费周期将立即开始，你将获得相应套餐的所有权益。如果你有任何疑问，可以联系我们的客服团队获取帮助。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 行动召唤 -->
      <section class="py-20 bg-gradient-primary text-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">
            开始你的智能交互之旅
          </h2>
          <p class="text-xl text-white/80 max-w-2xl mx-auto mb-10">
            加入DeepSeek，体验AI带来的高效与便捷，提升你的工作和学习效率
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="#"
              class="px-8 py-3 bg-white text-primary hover:bg-white/90 font-medium rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-0.5"
            >
              免费注册
            </a>
            <a
              href="#"
              class="px-8 py-3 bg-transparent border-2 border-white text-white hover:bg-white/10 font-medium rounded-lg transition-all transform hover:-translate-y-0.5"
            >
              了解更多
            </a>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white dark:bg-dark-200 transition-theme py-12">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
          <!-- Logo 和简介 -->
          <div class="col-span-2 lg:col-span-2">
            <div class="flex items-center space-x-2 mb-4">
              <div
                class="w-8 h-8 bg-gradient-primary rounded-lg flex items-center justify-center"
              >
                <span class="text-white font-bold text-lg">D</span>
              </div>
              <span
                class="text-xl font-bold bg-clip-text text-transparent bg-gradient-primary"
                >DeepSeek</span
              >
            </div>
            <p class="text-gray-600 dark:text-gray-300 mb-4 max-w-xs">
              打造智能、高效、自然的人机交互体验，让AI赋能每个人。
            </p>
            <div class="flex space-x-4">
              <a
                href="#"
                class="text-gray-400 hover:text-primary transition-colors"
              >
                <i class="fa fa-twitter"></i>
              </a>
              <a
                href="#"
                class="text-gray-400 hover:text-primary transition-colors"
              >
                <i class="fa fa-github"></i>
              </a>
              <a
                href="#"
                class="text-gray-400 hover:text-primary transition-colors"
              >
                <i class="fa fa-linkedin"></i>
              </a>
              <a
                href="#"
                class="text-gray-400 hover:text-primary transition-colors"
              >
                <i class="fa fa-youtube-play"></i>
              </a>
            </div>
          </div>

          <!-- 链接组 1 -->
          <div>
            <h4 class="font-semibold mb-4">产品</h4>
            <ul class="space-y-2">
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >功能</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >价格</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >API</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >更新日志</a
                >
              </li>
            </ul>
          </div>

          <!-- 链接组 2 -->
          <div>
            <h4 class="font-semibold mb-4">资源</h4>
            <ul class="space-y-2">
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >文档</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >教程</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >博客</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >社区</a
                >
              </li>
            </ul>
          </div>

          <!-- 链接组 3 -->
          <div>
            <h4 class="font-semibold mb-4">公司</h4>
            <ul class="space-y-2">
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >关于我们</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >联系我们</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >隐私政策</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
                  >服务条款</a
                >
              </li>
            </ul>
          </div>
        </div>

        <div
          class="border-t border-light-300 dark:border-dark-100 pt-8 flex flex-col md:flex-row justify-between items-center"
        >
          <p class="text-gray-500 dark:text-gray-400 text-sm mb-4 md:mb-0">
            &copy; 2023 DeepSeek. 保留所有权利。
          </p>
          <div class="flex space-x-6">
            <a
              href="#"
              class="text-gray-500 dark:text-gray-400 hover:text-primary text-sm transition-colors"
              >隐私政策</a
            >
            <a
              href="#"
              class="text-gray-500 dark:text-gray-400 hover:text-primary text-sm transition-colors"
              >服务条款</a
            >
            <a
              href="#"
              class="text-gray-500 dark:text-gray-400 hover:text-primary text-sm transition-colors"
              >Cookie 设置</a
            >
          </div>
        </div>
      </div>
    </footer>

    <!-- JavaScript -->
    <script>
      // 主题切换功能
      const themeToggle = document.getElementById("theme-toggle");
      const htmlElement = document.documentElement;

      // 检查本地存储中的主题偏好
      if (
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        htmlElement.classList.add("dark");
      } else {
        htmlElement.classList.remove("dark");
      }

      // 切换主题
      themeToggle.addEventListener("click", () => {
        htmlElement.classList.toggle("dark");

        // 保存主题偏好到本地存储
        if (htmlElement.classList.contains("dark")) {
          localStorage.theme = "dark";
        } else {
          localStorage.theme = "light";
        }
      });

      // 移动端菜单切换
      const mobileMenuButton = document.getElementById("mobile-menu-button");
      const mobileMenu = document.getElementById("mobile-menu");

      mobileMenuButton.addEventListener("click", () => {
        mobileMenu.classList.toggle("hidden");
      });

      // 导航栏滚动效果
      window.addEventListener("scroll", () => {
        const header = document.querySelector("header");
        if (window.scrollY > 10) {
          header.classList.add("shadow");
          header.classList.remove("shadow-sm");
        } else {
          header.classList.remove("shadow");
          header.classList.add("shadow-sm");
        }
      });

      // FAQ 折叠功能
      const faqToggles = document.querySelectorAll(".faq-toggle");

      faqToggles.forEach((toggle) => {
        toggle.addEventListener("click", () => {
          const content = toggle.nextElementSibling;
          const icon = toggle.querySelector("i");

          // 切换当前FAQ的显示状态
          content.classList.toggle("hidden");
          icon.classList.toggle("rotate-180");

          // 关闭其他打开的FAQ
          faqToggles.forEach((otherToggle) => {
            if (otherToggle !== toggle) {
              const otherContent = otherToggle.nextElementSibling;
              const otherIcon = otherToggle.querySelector("i");

              if (!otherContent.classList.contains("hidden")) {
                otherContent.classList.add("hidden");
                otherIcon.classList.remove("rotate-180");
              }
            }
          });
        });
      });

      // 聊天演示功能
      const userInput = document.getElementById("user-input");
      const sendButton = document.getElementById("send-button");
      const chatContainer = document.getElementById("chat-container");
      const queryButtons = document.querySelectorAll("[data-query]");

      // 预设回复
      const responses = {
        "如何使用DeepSeek的API？":
          "使用DeepSeek的API非常简单。首先，你需要在账户设置中生成API密钥。然后，参考我们的API文档，使用你偏好的编程语言发送HTTP请求。我们提供了Python、JavaScript等多种语言的SDK，简化集成过程。",
        "DeepSeek支持哪些编程语言？":
          "DeepSeek的API可以与任何支持HTTP请求的编程语言一起使用。我们提供了Python、JavaScript、Java、Go和Ruby的官方SDK，社区也开发了许多其他语言的客户端库。",
        "有免费计划吗？":
          "是的，我们提供免费计划，包含每月50次对话和基础功能访问，适合个人学习和体验。如果你需要更多功能和使用次数，可以升级到专业版或企业版。",
      };

      // 发送消息函数
      function sendMessage(message) {
        if (!message.trim()) return;

        // 添加用户消息
        const userMessageHtml = `
        <div class="flex gap-3 justify-end animate-fade-in">
          <div class="bg-primary text-white rounded-2xl rounded-tr-none px-4 py-2 max-w-[80%]">
            <p class="text-sm">${message}</p>
          </div>
          <div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex-shrink-0"></div>
        </div>
      `;
        chatContainer.insertAdjacentHTML("beforeend", userMessageHtml);

        // 清空输入框
        userInput.value = "";

        // 滚动到底部
        chatContainer.scrollTop = chatContainer.scrollHeight;

        // 获取AI回复
        const aiResponse =
          responses[message] ||
          "感谢你的提问！我正在处理你的请求，这是一个示例回复。在实际应用中，这里会显示AI生成的回答。";

        // 延迟显示AI回复，模拟思考过程
        setTimeout(() => {
          const aiMessageHtml = `
          <div class="flex gap-3 animate-fade-in">
            <div class="w-8 h-8 rounded-full bg-gradient-primary flex-shrink-0"></div>
            <div class="bg-light-200 dark:bg-dark-100 rounded-2xl rounded-tl-none px-4 py-2 max-w-[80%]">
              <p class="text-sm">${aiResponse}</p>
            </div>
          </div>
        `;
          chatContainer.insertAdjacentHTML("beforeend", aiMessageHtml);

          // 滚动到底部
          chatContainer.scrollTop = chatContainer.scrollHeight;
        }, 800);
      }

      // 发送按钮点击事件
      sendButton.addEventListener("click", () => {
        sendMessage(userInput.value);
      });

      // 回车键发送消息
      userInput.addEventListener("keypress", (e) => {
        if (e.key === "Enter") {
          sendMessage(userInput.value);
        }
      });

      // 快捷查询按钮点击事件
      queryButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const query = button.getAttribute("data-query");
          userInput.value = query;
          sendMessage(query);
        });
      });

      // 价格计费方式切换
      const billingToggle = document.getElementById("billing-toggle");
      const priceElements = document.querySelectorAll(".font-bold");

      billingToggle.addEventListener("change", () => {
        if (billingToggle.checked) {
          // 按年付费（打8折）
          priceElements[0].textContent = "¥0"; // 免费版不变
          priceElements[1].textContent = "¥79"; // 99 * 0.8 = 79.2 → 79
          priceElements[2].textContent = "¥399"; // 499 * 0.8 = 399.2 → 399
        } else {
          // 按月付费
          priceElements[0].textContent = "¥0";
          priceElements[1].textContent = "¥99";
          priceElements[2].textContent = "¥499";
        }
      });
    </script>
  </body>
</html>
